<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <title>表单布局</title>
    <link rel="icon" href="favicon.ico">
    <!-- CSS start -->
    <link rel="stylesheet" href="icofont/style.css">
    <link rel="stylesheet" href="css/style.min.css">
    <!-- CSS over -->
    <!-- JS start -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/laydate/laydate.js"></script>
    <script src="js/scripts.js"></script>
    <!-- JS over -->
</head>


<body>
    <!-- header start -->
    <header>
        <!-- brand start -->
        <div class="brand">
            <h4 class="title">马鞍山市志业软件科技有限公司</h4>
            <p>后台管理系统</p>
        </div>
        <!-- brand start -->
        <!-- bar start -->
        <div class="header-bar">
            <!-- item start -->
            <div class="item dropdown header-list">
                <button type="button" data-toggle="dropdown">
                    <span>消息通知</span>
                    <span class="badge">3</span>
                </button>
                <div class="dropdown-menu">
                    <h6 class="dropdown-header">你有3条未读消息</h6>
                    <div class="dropdown-divider"></div>
                    <a class="item header-list-item" href="#">
                        <div class="dot blue"></div>
                        <p><b>站内通知: </b>新版后台管理系统即将上线</p>
                        <span>2017年9月1日 12:00</span>
                    </a>
                    <a class="item header-list-item" href="#">
                        <div class="dot green"></div>
                        <p><b>系统信息: </b>提交的信息审核通过</p>
                        <span>2017年9月1日 12:00</span>
                    </a>
                    <a class="item header-list-item" href="#">
                        <div class="dot red"></div>
                        <p><b>系统信息: </b>提交的信息未通过审核</p>
                        <span>2017年9月1日 12:00</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="item" href="#"><i class="icon-gear"></i>查看更多</a>
                </div>
            </div>
            <!-- item over -->
            <!-- item start -->
            <div class="item"><a href="#">技术支持</a></div>
            <!-- item over -->
            <!-- user start -->
            <div class="item dropdown header-user">
                <button type="button" data-toggle="dropdown">
                    <span class="user-name">zhouzhengrui</span>
                    <span class="user-position">前端攻城师</span>
                    <div class="avatar">
                        <img src="img/avatar.jpg" alt="">
                    </div>
                </button>
                <div class="dropdown-menu">
                    <a class="item" href="#"><i class="icon-pen"></i>编辑账号信息</a>
                    <a class="item" href="#"><i class="icon-lock"></i>修改密码</a>
                    <div class="dropdown-divider"></div>
                    <a class="item" href="page-login.html"><i class="icon-gear"></i>退出</a>
                </div>
            </div>
            <!-- user over -->
            <!-- fullscreen start -->
            <div class="item MT-hidden">
                <button type="button" id="fullscreen-view"><i class="icon-enlarge"></i></button>
                <button type="button" id="fullscreen-exit"><i class="icon-narrow"></i></button>
            </div>
            <!-- fullscreen over -->
            <!-- sidebar switch start -->
            <div class="item MT-hidden">
                <button type="button" id="modal-sidebar-button" data-toggle="modal" data-target="#modal-sidebar"><i class="icon-dot-array-y"></i></button>
            </div>
            <!-- sidebar switch over -->
            <!-- sidebar start -->
            <div class="modal fade" id="modal-sidebar">
                <div class="modal-dialog modal-stick-right">
                    <div class="modal-content">
                        <h1>右侧边栏</h1>
                    </div>
                </div>
            </div>
            <!-- sidebar over -->
        </div>
        <!-- bar over -->
        <!-- MT bar start -->
        <div class="MT-header-bar">
            <button class="MT-bar-toggler" type="button" data-toggle="collapse" data-target=".header-bar">
                <i class="icon-user"></i>
            </button>
            <button class="MT-bar-toggler" type="button" data-toggle="collapse" data-target="aside">
                <i class="icon-list"></i>
            </button>
        </div>
        <!-- MT bar over -->
    </header>
    <!-- header over -->

    <!-- aside start -->
    <aside>
        <!-- user start -->
        <div class="side-user">
            <div class="avatar">
                <img src="img/avatar.jpg" alt="">
            </div>
            <div class="info dropdown">
                <button type="button" class="user-name dropdown-toggle" data-toggle="dropdown">
                    <span>zhouzhengrui</span>
                </button>
                <span class="user-position">前端攻城师</span>
                <div class="dropdown-menu dropdown-menu-middle">
                    <a class="item" href="#">编辑账号信息</a>
                    <a class="item" href="#">修改密码</a>
                    <div class="dropdown-divider"></div>
                    <a class="item" href="page-login.html">退出</a>
                </div>
            </div>
        </div>
        <!-- user over -->
        <!-- nav start -->
        <div class="side-nav">
            <nav class="nav">
                <!-- item start -->
                <div class="item">
                    <a class="active" href="index.html" data-pjax><i class="icon-home"></i><span>首页</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-window"></i><span>演示模板 - 电子商务</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="demo-eCommerce.html" data-pjax>首页</a></div>
                        <div class="item"><a href="#" data-pjax>订单管理</a></div>
                        <div class="item"><a href="#" data-pjax>商品管理</a></div>
                    </div>
                </div>
                <!-- item over -->
                <h6 class="nav-title">页面布局</h6>
                <!-- item start -->
                <div class="item">
                    <a href="layout-templet.html" data-pjax><i class="icon-gear"></i><span>初始模板</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-gear"></i><span>主体布局</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="layout-grid.html" data-pjax>网格系统</a></div>
                        <div class="item"><a href="layout-card.html" data-pjax>卡片</a></div>
                        <div class="item"><a href="layout-tab.html" data-pjax>选项卡</a></div>
                        <div class="item"><a href="layout-collapse.html" data-pjax>折叠面板</a></div>
                        <div class="item"><a href="layout-responsive.html" data-pjax>响应式工具</a></div>
                    </div>
                </div>
                <!-- item over -->
                <h6 class="nav-title">组件</h6>
                <!-- item start -->
                <div class="item">
                    <a href="#" data-pjax><i class="icon-gear"></i><span>UI元素</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="ui-button.html" data-pjax>按钮</a></div>
                        <div class="item"><a href="ui-label.html" data-pjax>标签</a></div>
                        <div class="item"><a href="ui-icofont.html" data-pjax>字体图标</a></div>
                        <div class="item"><a href="ui-color.html" data-pjax>颜色</a></div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a href="list.html" data-pjax><i class="icon-gear"></i><span>列表</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a href="table.html" data-pjax><i class="icon-gear"></i><span>表格</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-gear"></i><span>表单</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="form-layout.html" data-pjax>表单布局</a></div>
                        <div class="item"><a href="form-input.html" data-pjax>输入框</a></div>
                        <div class="item"><a href="form-select.html" data-pjax>下拉列表</a></div>
                        <div class="item"><a href="form-radiocheckbox.html" data-pjax>单选多选框</a></div>
                        <div class="item"><a href="form-upload.html" data-pjax>文件上传</a></div>
                        <div class="item"><a href="form-validate.html" data-pjax>表单验证</a></div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-gear"></i><span>树</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="tree-ztree.html" data-pjax>zTree</a></div>
                        <div class="item"><a href="tree-treeview.html" data-pjax>Tree View</a></div>
                        <div class="item"><a href="tree-nestable.html" data-pjax>Nestable</a></div>
                    </div>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a href="modal.html" data-pjax><i class="icon-gear"></i><span>模态框</span></a>
                </div>
                <!-- item over -->
                <!-- item start -->
                <div class="item">
                    <a href="chart.html" data-pjax><i class="icon-gear"></i><span>数据图</span></a>
                </div>
                <!-- item over -->
                <h6 class="nav-title">其他</h6>
                <!-- item start -->
                <div class="item">
                    <a><i class="icon-gear"></i><span>单页</span></a>
                    <div class="nav-sub">
                        <div class="item"><a href="page-login.html">登录</a></div>
                        <div class="item"><a href="page-404.html">404</a></div>
                    </div>
                </div>
                <!-- item over -->
            </nav>
        </div>
        <!-- nav over -->
        <!-- dashboard start -->
        <div class="side-dashboard MT-hidden">
            <h6 class="side-title">仪表面板</h6>
            <div class="inner">
                <div class="info">
                    <p>进度条</p>
                    <p>60%</p>
                </div>
                <div class="progress">
                    <div class="progress-bar" style="width: 60%;"></div>
                </div>
                <div class="info">
                    <p>里程碑</p>
                    <p>30%</p>
                </div>
                <div class="progress">
                    <div class="progress-bar" style="width: 30%;"></div>
                </div>
            </div>
        </div>
        <!-- dashboard over -->
    </aside>
    <!-- aside over -->

    <!-- main start -->
    <main>
        <!-- banner start -->
        <div class="banner">
            <div class="banner-title">
                <h2>表单布局</h2>
                <p><code>form.form</code> / 将它放在卡片的主容器<code>.card-body</code>里面</p>
            </div>
        </div>
        <!-- banner over -->
        <!-- container start -->
        <div class="container-fluid">
            <!-- row start -->
            <div class="row">
                <!-- column start -->
                <div class="col-lg-12">
                    <section class="card">
                        <div class="card-header">
                            <h3 class="title">多列布局<small>需使用网格, 布局规则参考<a href="layout-grid.html" data-pjax>网格系统</a>, 区别是<code>.row</code>替换为<code>.form-row</code></small></h3>
                        </div>
                        <div class="card-body">
                            <!-- form start -->
                            <form class="form">
                                <!-- row start -->
                                <div class="form-row">
                                    <div class="col-lg-6">
                                        <fieldset class="form-group">
                                            <legend class="label">表单组件</legend>
                                            <input class="input" type="text">
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-6">
                                        <fieldset class="form-group">
                                            <legend class="label">表单组件</legend>
                                            <input class="input" type="text">
                                        </fieldset>
                                    </div>
                                </div>
                                <!-- row over -->
                                <!-- row start -->
                                <div class="form-row">
                                    <div class="col-lg-6">
                                        <fieldset class="form-group">
                                            <legend class="label">表单组件</legend>
                                            <input class="input" type="text">
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-3">
                                        <fieldset class="form-group">
                                            <legend class="label">表单组件</legend>
                                            <input class="input" type="text">
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-3">
                                        <fieldset class="form-group">
                                            <legend class="label">表单组件</legend>
                                            <input class="input" type="text">
                                        </fieldset>
                                    </div>
                                </div>
                                <!-- row over -->
                                <!-- row start -->
                                <div class="form-row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <legend class="label">表单组件</legend>
                                            <input class="input" type="text">
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <legend class="label">表单组件</legend>
                                            <input class="input" type="text">
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <legend class="label">表单组件</legend>
                                            <input class="input" type="text">
                                        </fieldset>
                                    </div>
                                </div>
                                <!-- row over -->
                                <div class="form-footer">
                                    <button class="button" type="button">按钮</button>
                                </div>
                            </form>
                            <!-- form over -->
                        </div>
                    </section>
                </div>
                <!-- column over -->
                <!-- column start -->
                <div class="col-lg-12">
                    <section class="code-group">
                        <h6 class="code-title">多列布局</h6>
                        <pre>
                            <code class="language-html">
                                <script type="text/plain">
                                <!-- form start -->
                                <form class="form">
                                    <!-- row start -->
                                    <div class="form-row">
                                        <div class="col-lg-6"><!-- 表单组件 --></div>
                                        <div class="col-lg-6"><!-- 表单组件 --></div>
                                    </div>
                                    <!-- row over -->
                                    <!-- row start -->
                                    <div class="form-row">
                                        <div class="col-lg-6"><!-- 表单组件 --></div>
                                        <div class="col-lg-3"><!-- 表单组件 --></div>
                                        <div class="col-lg-3"><!-- 表单组件 --></div>
                                    </div>
                                    <!-- row over -->
                                    <!-- row start -->
                                    <div class="form-row">
                                        <div class="col-lg-4"><!-- 表单组件 --></div>
                                        <div class="col-lg-4"><!-- 表单组件 --></div>
                                        <div class="col-lg-4"><!-- 表单组件 --></div>
                                    </div>
                                    <!-- row over -->
                                    <div class="form-footer"><!-- 按钮组件 --></div>
                                </form>
                                <!-- form over -->
                                </script>
                            </code>
                        </pre>
                    </section>
                </div>
                <!-- column over -->
            </div>
            <!-- row over -->
            <!-- row start -->
            <div class="row">
                <!-- column start -->
                <div class="col-lg-6">
                    <section class="card">
                        <div class="card-header">
                            <h3 class="title">单列布局<small>不需网格, 依次放入表单组件, 适合在容器宽度较窄的时候使用</small></h3>
                        </div>
                        <div class="card-body">
                            <!-- form start -->
                            <form class="form">
                                <fieldset class="form-group">
                                    <legend class="label">表单组件</legend>
                                    <input class="input" type="text">
                                </fieldset>
                                <fieldset class="form-group">
                                    <legend class="label">表单组件</legend>
                                    <input class="input" type="text">
                                </fieldset>
                                <div class="form-footer">
                                    <button class="button" type="button">按钮</button>
                                </div>
                            </form>
                            <!-- form over -->
                        </div>
                    </section>
                </div>
                <!-- column over -->
                <!-- column start -->
                <div class="col-lg-6">
                    <section class="code-group">
                        <h6 class="code-title">单列布局</h6>
                        <pre>
                            <code class="language-html">
                                <script type="text/plain">
                                <!-- form start -->
                                <form class="form">
                                    <!-- 表单组件 -->
                                    <!-- 表单组件 -->
                                    <div class="form-footer"><!-- 按钮组件 --></div>
                                </form>
                                <!-- form over -->
                                </script>
                            </code>
                        </pre>
                    </section>
                </div>
                <!-- column over -->
            </div>
            <!-- row over -->
        </div>
        <!-- container over -->
        <!-- page script start -->
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // 代码块
                $.when(
                    $.getScript('js/clipboard/clipboard.min.js'),
                    $.getScript('js/prism/prism.js'),
                    $.getScript('js/prism/prism-copy.js')
                ).then(function() {
                    Prism.highlightAll();
                });
            });
        </script>
        <!-- page script over -->
        <!-- copyright start -->
        <div class="copyright">
            <p>Powered by <a href="http://www.maszy.cn" target="_blank">© ZhiYe Software Technology Co.,Ltd</a></p>
        </div>
        <!-- copyright over -->

    </main>
    <!-- main over -->
</body>

</html>
